/* eslint-disable react-hooks/exhaustive-deps */
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
import loader from './loader';
import './index.css';

const Index = (props, ref) => {
  const container = useRef(null);
  const amap = useRef(null);
  const amapUI = useRef(null);
  const aloca = useRef(null);
  const map = useRef(null);
  const loca = useRef(null);
  const { onLoad } = props;

  useEffect(() => {
    loader.then(AMap => {
      amap.current = AMap;
      amapUI.current = window.AMapUI;
      aloca.current = window.Loca;
      map.current = new amap.current.Map(container.current, {
        resizeEnable: true,
        zoom: 17,
        // viewMode: '3D',
      });
      loca.current = new aloca.current.Container({
        map: map.current,
      });
      if (onLoad) onLoad();
    });
  }, []);

  useImperativeHandle(ref, () => ({
    getAmap: () => amap.current,
    getAmapUI: () => amapUI.current,
    getAloca: () => aloca.current,
    getMap: () => map.current,
    getLoca: () => loca.current,
  }));

  return (
    <div className='amap-container' ref={container} />
  );
}

export default forwardRef(Index);
